<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5语义化标签示例</title>
    <style>
        /* 为语义化标签添加边框、内外边距等样式，方便查看结构 */
        header, nav, main, article, section, aside, footer {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 15px;
        }
        nav ul {
            list-style: none;
            padding: 0;
        }
        nav li {
            display: inline;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <!-- 页眉，通常包含网站标题、logo、导航等 -->
    <header>
        <h1>美丽公主国/logo</h1>
        <p>大大大大大泡泡堂/公主--啊锤</p>
    </header>

    <!-- 导航，用于页面内或页面间的导航链接 -->
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#news">文章</a></li>
            <li><a href="#about">关于我们</a></li>
        </ul>
    </nav>

    <!-- 主体内容，页面的核心内容区域 -->
    <main>
        <!-- 文章，独立的内容块，如博客文章、新闻报道等 -->
        <article>
            <header>
                <h2>一篇关于语义化标签的文章</h2>
                <p>发布日期：<time datetime="2025-9-27">2025年9月27日</time></p>
            </header>
            <!-- 章节，用于划分文章的不同部分 -->
            <section>
                <h3>什么是语义化标签？</h3>
                <p>语义化标签是指……</p>
                <figure>
                    <!-- 图片，alt为图片无法显示时的替代文本 -->
                    <img src="semantic-html.jpg" alt="HTML5语义化标签图解">
                    <figcaption>图1：HTML5文档结构示例</figcaption>
                </figure>
            </section>
            <section>
                <h3>为什么使用语义化标签？</h3>
                <p>使用它的好处是……</p>
            </section>
            <footer>
                <p>文章标签：<mark>HTML5</mark>、<mark>Semantic Web</mark></p>
            </footer>
        </article>

        <!-- 侧边栏，通常包含与主体内容相关的补充信息，如相关推荐、广告等 -->
        <aside>
            <h3>相关推荐</h3>
            <ul>
                <li><a href="#link1">链接一</a></li>
                <li><a href="#link2">链接二</a></li>
            </ul>
        </aside>
    </main>

    <!-- 页脚，通常包含版权信息、联系方式等 -->
    <footer>
        <p>© 2025 XX网站，保留所有权利</p>
        <address>
            联系我们：<a href="3336598198@qq.com">contact@example.com</a>
        </address>
    </footer>
</body>
</html>